<template>
<view>
<!--pages/topicality/kaixueshijian/kaixueshijian.wxml-->
<!--<import src="../../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view>
  <image src="http://imgbdb3.bendibao.com/xcx/20207/07/2020707093514_64450.jpg" class="main-img">
    <!-- <view class="city-box">
      <text>{{city}}</text>
      <image src="/images/dwicon.png"></image>
    </view> -->
  </image>
  <!-- 作文题目 -->
  <view class="article-box">
    <view class="timu-box">
      <view style="margin-left:46rpx;">试卷类型</view>
      <view>作文题目</view>
      <view>详情</view>
    </view>
    <view v-for="(item, index) in infoData.zuowen" :key="index" class="timu-item">
      <view :class="item.showMore?'item-box1':'item-box'" @tap="bindClick" :data-index="index">
        <view class="item">
          <image :src="item.showMore?'/static/images/sys/jiantoushang.png':'/static/images/sys/jiantouxia.png'"></image>
          <text>{{item.shijuan}}</text>
        </view>
        <view :class="'timu-text ' + (item.showMore?'':'ellipsis')">{{item.title}}</view>
        <view class="detail" v-if="item.url" @tap.stop="navDetail" :data-id="item.id" :data-type="item.type" :data-citycode="item.citycode" :data-url="item.url" :data-title="item.title">详情</view>
      </view>
    </view>
  </view>
</view>

<!-- 资讯 -->
<view class="zx-box" v-if="articleData">
  <view class="zx-title">
    <image src="/static/images/sys/xf_icon2.png"></image>
    <text>高考资讯</text>
  </view>
  <view class="zx-content">
    <view v-for="(item, index) in articleData" :key="index" class="item-content" @tap="navDetail" :data-id="item.id" :data-type="item.type" :data-citycode="citycode">
      <view class="zx-flex-row">
        <image class="doticon" src="/static/images/sys/doubledot.png"></image>
        <view class="zx-text">{{item.title}}</view>
      </view>
      <view class="timetext">{{item.publictime}}</view>
    </view>
  </view>
</view>

<!-- 导粉 -->
<view class="daofen" v-if="daofen">
  <rich-text :nodes="daofen.content" style="user-select:text;-webkit-user-select:text">
  </rich-text>
</view>


<!-- 快捷导航 -->
<fastnav :qrcodeimg="qrcodeimg" :citycode="citycode" :showNav="showNav" :showShare="showShare"></fastnav>
</view>
</template>

<script>
// pages/topicality/kaixueshijian/kaixueshijian.js
//获取应用实例
const app = getApp();
const util = require("../../../../utils/util.js");
import fastnav from "../../../../component/fastnav/fastnav";

export default {
  data() {
    return {
      showNav: true,
      // 快捷导航是否展开
      tAppid: app.globalData.tAppid,
      textraData: app.globalData.textraData,
      showShare: true,
      // 显示分享按钮
      showtk: false,
      citycode: "",
      articleData: [],
      daofen: false,
      qrcodeimg: "",
      city: "",
      infoData: "",
      title: ""
    };
  },

  components: {
    fastnav
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      citycode: options.city ? options.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz'
    });
    util.getUrl(app.globalData.url).then(res => {
      // 获取城市公众号二维码
      util.cityConfig(this.citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
      util.cityList().then(res => {
        let citydata = res.allcity.filter(v => v.citycode == this.citycode);
        this.setData({
          city: Array.isArray(citydata) ? citydata[0].cityname : uni.getStorageSync("city")
        });
      });
      this.getSchoolData();
      util.inforMation(this.citycode, "高考").then(res => {
        this.setData({
          articleData: res
        });
      });
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.title ? this.title : "高考作文查询"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.title ? this.title : "高考作文查询",
      imageUrl: "http://imgbdb3.bendibao.com/xcx/20207/07/2020707093514_64450.jpg",
      query: {
        id: this.id
      }
    };
  },
  methods: {
    getSchoolData() {
      let data = {
        action: "zuowen",
        citycode: this.citycode
      };
      util.request('zhuanti.php', data).then(res => {
        if (res.data.data.daofen) {
          res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
        }

        uni.setNavigationBarTitle({
          title: res.data.data ? res.data.data.title : "高考作文查询"
        });

        if (res.data.data.zuowen) {
          res.data.data.zuowen.forEach((v, k) => {
            v.showMore = false;
          });
        }

        this.setData({
          infoData: res.data.data,
          daofen: res.data.data.daofen,
          title: res.data.data.title
        });
      });
    },

    // 点击事件
    bindClick(e) {
      let index = e.currentTarget.dataset.index;
      this.infoData.zuowen.forEach((v, k) => {
        if (k == index) {
          v.showMore = !v.showMore;
        }
      });
      this.setData({
        infoData: this.infoData
      });
    },

    // 查看详情
    navDetail(e) {
      let id = e.currentTarget.dataset.id;
      let citycode = e.currentTarget.dataset.citycode;
      let url = e.currentTarget.dataset.url;
      let type = e.currentTarget.dataset.type;
      let title = e.currentTarget.dataset.title;

      if (id != 0) {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + citycode
        });
      } else {
        this.setData({
          showtk: true
        });
        util.navContact(title, url);
      }
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      this.setData({
        showNav: false
      });
    }
  }
};
</script>
<style>
/* pages/topicality/kaixueshijian/kaixueshijian.wxss */
.main-img{width: 100%;height: 276rpx;}
.city-box{background: #ffffff;border-radius: 35rpx;padding: 10rpx 30rpx;position: absolute;
top: 13rpx;right: 30rpx;}
.city-box text{font-size: 30rpx;font-weight: bolder;}

/* 作文 */
.article-box{margin:30rpx 40rpx 0 40rpx;padding-bottom: 50rpx;}
.timu-box{display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin: 0 30rpx;}
.timu-box view{font-size: 28rpx;color: #333333;}
.item-box{padding:30rpx;border-radius: 20rpx;margin-top: 35rpx;background-color:#fafafa;
display: flex;flex-direction: row;align-items: flex-start;justify-content: space-between;}
.item-box1{padding:30rpx;border-radius: 20rpx;margin-top: 35rpx;background-color:#fff;
display: flex;flex-direction: row;align-items: flex-start;justify-content: space-between;
box-shadow:0rpx 6rpx 12rpx rgba(0,0,0,0.16);border:1rpx solid #fafafa;}
.item{display: flex;flex-direction: row;align-items: center;}
.item image{width: 25rpx;height:25rpx;margin-right: 20rpx;}
.item text{font-size: 28rpx;color: #333333;font-weight: 600;}
.timu-text{font-size: 28rpx;color: #333333;width: 338rpx;display:-webkit-box;    }
.ellipsis{
  -webkit-line-clamp:1;  /* 行数 */
  -webkit-box-orient: vertical;
  overflow:hidden;  /* 超出隐藏 */
  text-overflow: ellipsis;  /* 省略号 */
}
/* .timu-text1{font-size: 28rpx;color: #333333;width: 338rpx;display:-webkit-box;} */
.detail{font-size: 28rpx;color:#3EA5FF;}
/* 资讯 */
.zx-box{margin: 30rpx 40rpx;}
.zx-title{display: flex;align-items: center;flex-direction: row;}
.zx-title image{width: 18rpx;height: 26rpx;margin-right: 15rpx;}
.zx-title text{font-size:32rpx;font-family:PingFang SC;font-weight:bold;
line-height:44rpx;color:rgba(20,20,20,1);opacity:1;}
.zx-text{font-size: 30rpx;color: #000000;font-weight:bold;}
/*white-space:nowrap;  */
.zx-flex-row{display: flex;align-items: flex-start;}
.doticon{width: 24rpx;height: 16rpx;margin-right: 15rpx;margin-top: 10rpx;}
.item-content{display: flex;flex-direction: column;border-bottom: 1rpx solid #cccccc;
padding: 30rpx 0;}
.timetext{font-size:26rpx;font-family:PingFang SC;font-weight:500;
color:rgba(152,150,150,1);opacity:1;margin-top: 20rpx;margin-left: 40rpx;}
/* 相关资讯 */
.related-info-box{border-top: 15rpx solid rgba(238,238,238,1);}
/* 导粉 */
.daofen{margin:0 30rpx 80rpx 30rpx;text-align: center;}
.p_class{margin:10rpx 30rpx;line-height: 50rpx;}

</style>